<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <base th:href="${#request.getContextPath()}+'/'">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>授权</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">


</head>
<body>


<!--角色表开始-->
<form name="formSelect" method="post" action="">

    <table width="100%" border="0" cellspacing="6" cellpadding="0"
           style="border-collapse: separate; border-spacing: 6px;">
        <tr valign="top">

            <td>
                <!--width="100%" border="1" cellspacing="0" cellpadding="6"-->
                <table width="100%" border="1" cellspacing="0" cellpadding="6">
                    <tr>
                        <td style="padding: 0 8px 4px;">
                            <a /><b><button type="button" class="btn_style">
                                新建
                            </button>&nbsp;</b>
                            </a>
                            <a /><b><button type="button" class="btn_style" >
                                修改
                            </button>&nbsp;</b>
                            </a>
                            <a/><b><button type="button" class="btn_style" data-toggle="modal" data-target="#myModal" onclick="funcTree()">
                                授权
                            </button>&nbsp;</b>
                            </a>
                            <a /><b><button type="button" class="btn_style" >
                                删除
                            </button>&nbsp;</b>
                            </a>
                            关键词:
                            <input name="searchText" type="text" id="searchText" onkeydown="enterSubmit();" class="ipt_style" value="">
                            <input type="button" name="sb" id="sb" class="btn_style" value="查询" onclick="return search();">
                        </td>
                    </tr>
                    <tr>
                        <td
                                style="padding-top: 0px; padding-left: 6px; padding-right: 6px; padding-bottom: 8px;">
                            <table width="100%" cellpadding="2" cellspacing="0"
                                   class="table table-hover" sortstring="" id="dg1" page="true" size="0"
                                   method="com.zving.cms.dataservice.Vote.dg1DataBind"
                                   multiselect="true" autofill="true" scroll="false" lazy="false"
                                   cachesize="0">
                                <tr ztype="head" class="dataTableHead">
                                    <td width="5%" align="center">
                                        序 号
                                    </td>
                                    <td width="3%" align="center" ztype="selector" field="id">
                                        <input type='checkbox' value='*' id='dg1_AllCheck'
                                               onclick="DataGrid.onAllCheckClick('dg1')" />
                                    </td>
                                    <td align="center" width="10%">
                                        <b>角色编号</b>
                                    </td>
                                    <td align="center" width="10%">
                                        <b>角色名称</b>
                                    </td>
                                    <td align="center" width="10%">
                                        <b>角色类型</b>
                                    </td>
                                    <td align="center" width="10%">
                                        <b>角色描述</b>
                                    </td>
                                    <td align="center" width="10%">
                                        <b>排序编号</b>
                                    </td>
                                </tr>


                                <tr height="35" id="${roles.roleId}_tr"  style="background:#ffffff" th:each="roles:${roleInfos}" th:attr="id=${roles.roleId}">



                                    <td align="center" th:text="${rolesStat.count}">
                                        1
                                    </td>
                                    <td align="center">
                                        <input type='checkbox' name='dg1_RowCheck' id='dg1_RowCheck${rolesStat.count}' value='${roles.roleId}' th:attr="value=${roles.roleId},id=${rolesStat.count}" onclick="selectBox(this)">
                                    </td>

                                    <td align="center" th:text="${roles.roleId}">
                                        57414897
                                    </td>

                                    <td align="center" th:text="${roles.userName}">
                                        管理员角色
                                    </td>

                                    <td align="center" th:text="${roles.roleName}">
                                        管理角色
                                    </td>

                                    <td align="center" th:text="${roles.roleDesc}">
                                        系统管理员角色
                                    </td>

                                    <td align="center" th:text="${roles.roleOrder}">
                                        1
                                    </td>
                                </tr>

                                <tr>
                                    <td colspan="7" align="center" id="dg1_PageBar" class="pagebg">
                                        <div style='float: right; font-family: Tahoma;' class="flickr">

                                            <span class="current">1</span>


                                        </div>

                                        <div style='float: left; font-family: Tahoma'>
                                            共 <span th:text="6"></span> 条记录，每页 20 条，共 1 页
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</form>
<!--角色表结束-->

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <div id="treeview-checkable" class=""></div>
                <h2>请先选择角色!</h2>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script src="js/bootstrap-treeview.js"></script>
<script type="text/javascript">

    var roleId;//当前角色
    var beforeId;//上一次所选框id
    function selectBox(target) {
        if (roleId == undefined || roleId == null) {
            /*第一次选,直接设置为true,记录roleid*/
        }else {
            /*第二次选,把上一个设置为false,这一个设置为ture,记录rolecode*/
            var nt = "#"+beforeId;
            $(nt).prop('checked',false);
        }
        $(target).prop('checked',true);//直接设置为选中
        roleId=$(target).val();
        beforeId=$(target).attr('id');
    }

    function funcTree(){
        if (roleId == undefined || roleId == null){

            return;
        }
        $.post("user/checkPermission",
                {roleCode:roleId},
                function (defaultData) {
                    var $checkableTree = $('#treeview-checkable').treeview({
                        data: defaultData,
                        showIcon: false,
                        showCheckbox: true,
                        levels:1,
                        onNodeChecked: function(event, node) {

                            $.post("user/add-permission",
                                {roleCode:roleId,
                                    moduleCode:node.moduleCode
                                },
                                function (data) {
                                    if(data.mark==1){
                                        alert("添加成功");

                                        if (data.msg == 'parent') {
                                            //选中父节点
                                            var selectNodes = getChildNodeIdArr(node); //获取所有子节点
                                            if (selectNodes) { //子节点不为空，则选中所有子节点
                                                $('#treeview-checkable').treeview('checkNode', [selectNodes, { silent: true }]);
                                            }
                                            var parentNode = $("#treeview-checkable").treeview("getNode", node.parentId);
                                            setParentNodeCheck(node);

                                        }else if (data.msg == 'child') {

                                        }
                                    }else {
                                        alert("添加失败");
                                    }
                                }
                            );
                        },
                        onNodeUnchecked: function (event, node) {
                            alert(node.fid);
                            $.post("user/cancel-permission",
                                {fid:node.fid,
                                    roleCode:roleId,
                                    moduleCode:node.moduleCode
                                },
                                function (data) {
                                    if(data.mark==1){
                                        alert("取消成功");

                                        if (data.msg == 'parent') {//取消的父节点
                                            var selectNodes = getChildNodeIdArr(node); //获取所有子节点
                                            if (selectNodes) { //子节点不为空，则取消选中所有子节点
                                                $('#treeview-checkable').treeview('uncheckNode', [selectNodes, { silent: true }]);
                                            }
                                        }

                                    }else {

                                        alert("取消失败");
                                    }
                                }
                            );
                        }
                    });

                });
        }

        /*取消父节点时,子节点取消*/
        function getChildNodeIdArr(node) {
            var ts = [];
            if (node.nodes) {
                for (x in node.nodes) {
                    ts.push(node.nodes[x].nodeId);
                    if (node.nodes[x].nodes) {
                        var getNodeDieDai = getChildNodeIdArr(node.nodes[x]);
                        for (j in getNodeDieDai) {
                            ts.push(getNodeDieDai[j]);
                        }
                    }
                }
            } else {
                ts.push(node.nodeId);
            }
            return ts;
        }
        /*选中父节点时,选择所有子节点*/
        function setParentNodeCheck(node) {
            var parentNode = $("#treeview-checkable").treeview("getNode", node.parentId);
            if (parentNode.nodes) {
                var checkedCount = 0;
                for (x in parentNode.nodes) {
                    if (parentNode.nodes[x].state.checked) {
                        checkedCount ++;
                    } else {
                        break;
                    }
                }
                if (checkedCount === parentNode.nodes.length) {
                    $("#treeview-checkable").treeview("checkNode", parentNode.nodeId);
                    setParentNodeCheck(parentNode);
                }
            }
        }







</script>
</body>
</html>